
<head>
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Expires" content="0" />
</head>
<template>
	<view style="display: flex;">
		<view>
			<button size="mini" type="primary" @click="scroolplay" style="pos;">循环播放{{this.currtetimage}}</button>
			<scroll-view scroll-y="true" style="width: 20vw; height: 100vh; ">
				<view v-for="item in picturelist">
					<image :src="item.item" style="width: 20vw; height: 15vw;" @click="showimage(item.item)"></image>
				</view>
			</scroll-view>
		</view>
		<view style="width: 80vw;height: 100vh; ">
			<image :src="this.imagename" style="width: 80vw; height: 100vh;">
			</image>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				picturelist: [{
						'item': '/static/2.png'
					},
					{
						'item': '/static/3.png'
					},
					{
						'item': '/static/4.png'
					},
					{
						'item': '/static/5.png'
					},
					{
						'item': '/static/6.png'
					},
					{
						'item': '/static/7.png'
					}
				],
				imagename: '/static/2.png',
				currtetimage: 0,
				timer: null
			}
		},
		onLoad() {},
		methods: {
			showimage(e) {
				this.stopscroolplay()
				this.imagename = e
			},
			scroolplay() {
				console.log('scroolplay_click')
				this.nextpage()
				this.timer = setInterval(() => {
					this.nextpage()
				}, 5000);
			},
			nextpage() {
				if (this.currtetimage > 84) {
					this.currtetimage = 0
				}
				this.imagename = this.picturelist[this.currtetimage].item
				this.currtetimage += 1;
				console.log(this.picturelist[this.currtetimage].item)
				console.log("setTimeout");

			},
			stopscroolplay() {
				clearInterval(this.timer)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>